<template>
  <div class="">
    <tableLayout :tableHeader="tableHeader" :columns="columns" :data="data" v-model:selected-keys="selectedKeys"
      v-model:current="pagination.current" v-model:pageSize="pagination.pageSize" :total="pagination.total"
      @header-click="headerClick" @page-change="pageChange" @page-size-change="pageSizeChange">
      <template #search="">
        <a-input-search :style="{ width: '210px' }" placeholder="请输入搜索内容" />
      </template>
      <template #action="{ record }">
        <a-button type="primary" @click="tableclick(record)">{{
          record.age
        }}</a-button>
      </template>
    </tableLayout>
    <ModalView ref="modalViewRef" v-model:visible="visible" :model="formConfig.form" :rules="formConfig.rules"
      @submitOk="handleBeforeOk">
      <template #title> 用户权限 </template>
      <a-form-item field="rightName" label="权限名称">
        <a-input v-model="formConfig.form.rightName" />
      </a-form-item>
      <a-form-item field="rightDesc" label="权限描述">
        <a-input v-model="formConfig.form.rightDesc" />
      </a-form-item>
      <a-form-item field="rightType" label="权限类型">
        <a-input v-model="formConfig.form.rightType" />
      </a-form-item>
      <a-form-item field="rightPath" label="权限路径">
        <a-input v-model="formConfig.form.rightPath" />
      </a-form-item>
      <a-form-item field="rightIcon" label="权限图标">
        <a-input v-model="formConfig.form.rightIcon" />
      </a-form-item>
      <a-form-item field="sort" label="排序">
        <a-input-number v-model="formConfig.form.sort" />
      </a-form-item>
      <a-form-item field="isShow" label="权限状态">
        <a-switch v-model="formConfig.form.isShow" :checked-value="1" :unchecked-value="0" />
      </a-form-item>
    </ModalView>
  </div>
</template>
<script lang="tsx" setup>
import { ref, h, reactive, onMounted } from "vue";
import api from "@/api/index";
import { type TableColumnData } from "@arco-design/web-vue";
import tableLayout from "@/components/table/tableLayout.vue";
import ModalView from "@/components/ModalView/index.vue";
import type { TableHeader } from "@/components/table/type.ts";
import { Form, Tag, Link, Message, Popconfirm } from "@arco-design/web-vue";
const loading = ref(false);
const data = ref([]);
const modalViewRef = ref<InstanceType<typeof ModalView>>();
const visible = ref(false);
const formConfig = reactive<{ form: any; rules: any; type: boolean }>({
  type: true,
  form: {
    rightName: "",
    rightDesc: "",
    rightType: "",
    rightPath: "",
    rightIcon: "",
    sort: 0,
    isShow: 0,
  },
  rules: {
    rightName: [
      {
        required: true,
        message: "权限名称不能为空",
      },
    ],
    rightDesc: [
      {
        required: true,
        message: "权限描述不能为空",
      },
    ],
    rightType: [
      {
        required: true,
        message: "权限类型不能为空",
      },
    ],
  },
});
const tableHeader = reactive<TableHeader[]>([
  {
    name: "add",
    label: "新增",
    type: "button",
  },
  {
    name: "search",
    label: "搜索",
    align: "right",
  },
  {
    name: "more",
    label: "更多",
    type: "button",
    align: "right",
  },
]);
const columns = ref<TableColumnData[]>([
  {
    title: "用户头像",
    dataIndex: "avatar",
    align: "center",
  },
  {
    title: "账号",
    dataIndex: "account",
    align: "center",
  },
  {
    title: "用户名",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "用户角色",
    dataIndex: "roel",
    align: "center",
  },

  {
    title: "用户手机号",
    dataIndex: "phone",
    align: "center",
  },
  {
    title: "用户邮箱",
    dataIndex: "email",
    align: "center",
  },
  {
    title: "用户地址",
    dataIndex: "address",
    align: "center",
  },
  {
    title: "用户简介",
    dataIndex: "intro",
    align: "center",
  },
  {
    title: "用户权限",
    dataIndex: "userRight",
    align: "center",
  },
  {
    title: "操作",
    align: "center",
    render: ({ record }: any) => {
      return (
        <>
          <Link onClick={() => onDetail(record.id)}>修改</Link>
          <Link onClick={() => onDetail(record.id, "details")}>详情</Link>
          <Popconfirm
            content="确定要删除吗?"
            type="error"
            onOk={() => onDelete(record.id)}
          >
            <Link status="danger">删除</Link>
          </Popconfirm>
        </>
      );
    },
  },
]);
//选中
const selectedKeys = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 100,
});
const pageChange = (current: number) => {
  console.log(current, "pageChange");
};
const pageSizeChange = (current: number) => {
  console.log(current, "pageSizeChange");
};
const headerClick = (data: any) => {
  switch (data.name) {
    case "add":
      visible.value = true;
      formConfig.type = true;
      break;

    default:
      break;
  }
};

const tableclick = (value: any) => {
  console.log(value);
};
const getData = () => {
  loading.value = true;
  let params = {
    size: pagination.pageSize,
    current: pagination.current,
  };
  api.user_list(params).then((res) => {
    data.value = res.data.list;
  });
};
onMounted(() => {
  getData();
});
// 详情
const onDetail = (id: number, type: "details" | "alter" = "alter") => {
  formConfig.type = type == "alter";
  api.user_info(id).then((res) => {
    if (res.code == 200) {
      visible.value = true;
      formConfig.form = res.data;
    }
  });
};
//删除
const onDelete = (id: number) => {
  api.user_right_delete(id).then((res) => {
    if (res.code == 200) {
      Message.success("删除成功");
      getData();
    }
  });
};

// 新增/修改
const handleBeforeOk = ({ done }: any) => {
  if (!formConfig.type) {
    done(true);
    return;
  }
  modalViewRef.value.formRef?.validate((errors) => {
    if (errors) return done(false);
    api.user_right_create(formConfig.form).then((res) => {
      if (res.code == 200) {
        done(true);
        visible.value = false;
        getData();
      } else {
        done(false);
      }
    });
  });
};
</script>
<style lang="scss" scoped></style>
